<template>
  <div>
    <!-- 顶部信息 begin -->
    <div class="header">
      <img src="../../../static/images/exchange/header.png" alt="">
      <div class="point">我的积分 <span>{{totalScore}}</span></div>
      <div class="rule" @click="navToExchangeRule">
        <img src="../../../static/images/exchange/warning.png" alt="">
        <span>兑换规则</span>
      </div>
      <div class="btn address" @click="navToAddress">添加地址 ></div>
      <div class="btn record" @click="navToExchangeRecorder">兑换记录</div>
    </div>
    <!-- 顶部信息 end -->

    <!-- 商品内容 begin -->
    <div class="goods">
      <div class="goods-item" v-for="(item, index) in goods" :key="index">
        <img :src="item.main_image" alt="" @click="navToGoods">
        <div class="text1">{{item.good_name}}</div>
        <div class="text2">{{item.score}}积分</div>
        <div class="text3">市场价：{{item.goods_price}}元</div>
        <div class="text4" @click="handlerExchangeGoods(item)">马上兑换</div>
      </div>
    </div>
    <!-- 商品内容 end -->

    <div class="logo">
      <img src="../../../static/images/exchange/logo.png" alt="">
    </div>

    <!-- 兑换商品确认对话框 begin -->
    <MDialog v-if="showConfirm" :msg="dialogMsg" :msgdesc="dialogMsgDesc" @confirm="confirm" @cancel="cancel"></MDialog>
    <!-- 兑换商品确认对话框 end -->

    <!-- 兑换商品积分不够提示框 begin -->
    <MPrompt :msg="promptMsg" @confirm="promptConfirm" v-if="showPrompt"></MPrompt>
    <!-- 兑换商品积分不够提示框 end -->

    <!-- 地址提示弹窗 begin -->
    <div class="confirm-mask" catchtouchmove='ture' v-if="showAddressAddr">
      <div class="confirm-addr-content">
        <img src="../../../static/images/exchange/mask-addr.png" alt="">
        <div><span @click="closeAddressMask">马上添加</span></div>
      </div>
    </div>
    <!-- 地址提示弹窗 end -->

  </div>
</template>

<script>
import MPrompt from '../../components/MPrompt.vue'
import MDialog from '../../components/MDialog.vue'

export default {
  data () {
    return {
      totalScore: 0,
      goods: [], // 商品列表
      exchangeGoods: '', // 兑换的商品
      showConfirm: false, // 兑换商品确认对话框：true显示
      showPrompt: false, // 兑换商品积分不够提示框
      showAddressAddr: true, // 地址提示弹窗
      promptMsg: '对不起，您的积分还不够哦，请坚持签到吧！',
      dialogMsg: '确定使用500积分兑换？',
      dialogMsgDesc: '兑换后可在【兑换记录】中查看',
      openid: ''
    }
  },

  components: {
    MPrompt,
    MDialog
  },

  mounted () {
    this.getGoods()
    this.openid = wx.getStorageSync('openid')
  },

  onLoad (property) {
    console.log('传参', property)
    this.totalScore = property.totalScore
  },

  onShow () {
    console.log('是否有地址', wx.getStorageSync('haveAddress'))
    if (wx.getStorageSync('haveAddress')) {
      this.showAddressAddr = false
    } else {
      this.showAddressAddr = true
    }
  },

  methods: {

    /**
     * 兑换商品
     */
    handlerExchangeGoods (item) {
      this.dialogMsg = '确定使用' + item.score + '积分兑换？'
      this.showConfirm = true
      this.exchangeGoods = item
    },

    /**
     * 查询商品列表
     */
    getGoods () {
      this.$http.get('/api/v1/goods?cls=jf').then(res => {
        console.log('商品列表', res)
        if (res.data.code === '0') {
          this.goods = res.data.data
        } else {
          // 签到失败
          console.log('商品列表失败')
        }
      })
    },

    /**
     * 跳转兑换记录页面
     */
    navToExchangeRecorder () {
      wx.navigateTo({
        url: '../exchangeRecorder/main'
      })
    },

    /**
     * 跳转兑换规则页面
     */
    navToExchangeRule () {
      console.log('跳转收货地址页面')
      wx.navigateTo({
        url: '../exchangeRule/main'
      })
    },

    /**
     * 跳转收货地址页面
     */
    navToAddress () {
      wx.navigateTo({
        url: '../address/main'
      })
    },

    navToGoods () {
      // wx.navigateTo({
      //   url: '../goods/main'
      // })
    },

    /**
     * 关闭地址提示弹窗
     */
    closeAddressMask () {
      this.showAddressAddr = false
    },

    /**
     * 关闭消息提示框
     */
    promptConfirm (flag) {
      this.showPrompt = false
    },

    /**
     * 确认兑换
     */
    confirm (flag) {
      console.log('确定弹窗', flag)
      this.showConfirm = false
      const score = this.exchangeGoods.score
      if (this.totalScore < score) {
        this.promptMsg = '对不起，您的积分还不够哦，请坚持签到吧！'
        this.showPrompt = true
        return
      }
      if (!wx.getStorageSync('haveAddress')) {
        this.promptMsg = '请您添加地址！'
        this.showPrompt = true
        return
      }

      this.$http.post('/api/v1/score/exchange', {
        body: {
          openid: this.openid,
          good_id: this.exchangeGoods.good_id
        }
      }).then(res => {
        console.log('商品兑换返回结果', res)
        if (res.data.code === '0') {
          console.log('商品兑换成功')
          this.promptMsg = '商品兑换成功'
          this.showPrompt = true
          this.totalScore = this.totalScore - score
        } else {
          console.log('商品兑换失败')
          this.promptMsg = '商品兑换失败'
          this.showPrompt = true
        }
      })
    },

    /**
     * 取消兑换
     */
    cancel (flag) {
      console.log('取消弹窗', flag)
      this.showConfirm = false
    }
  }
}
</script>

<style scoped>
.header {
  background: #911317;
  font-size: 30rpx;
}

.header img {
  width: 100%;
  height: 282rpx;
}

.header .point {
  position: absolute;
  top: 70rpx;
  left: 0;
  color: #834548;
  padding: 20rpx 50rpx;
  border-top-right-radius: 100rpx;
  border-bottom-right-radius: 100rpx;
  background: #fff;
  opacity: 0.9;
}

.header .point span {
  color: #e33a44;
}

.header .rule {
  font-size: 28rpx;
  color: #fd606a;
  position: absolute;
  top: 30rpx;
  right: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.header .rule img {
  height: 25rpx;
  width: 25rpx;
  margin-right: 10rpx;
}

.header .btn {
  color: #fff;
  font-weight: bold;
  padding: 15rpx 30rpx;
  border-radius: 100rpx;
  width: 152rpx;
  text-align: center;
  position: absolute;
  right: 60rpx;
}

.header .address {
  top: 110rpx;
  background: linear-gradient(to bottom, #c1513e, #c55a52);
}

.header .record {
  color: #a5222a;
  z-index: 3;
  top: 206rpx;
  background: linear-gradient(to bottom, #efc48a, #fadbba);
}

.goods {
  margin: -50rpx 30rpx 0 30rpx;
  background: #fff;
  z-index: 2;
  border-radius: 20rpx;
  padding: 80rpx 20rpx 970rpx 20rpx;
  position: relative;
}

.goods-item {
  text-align: center;
  width: 211rpx;
  float: left;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
  padding: 10rpx;
  line-height: 1.4;
  box-sizing: border-box;
}

.goods-item:nth-child(3n) {
  margin-right: 0;
}

.goods-item img {
  height: 178rpx;
  width: 178rpx;
}

.goods-item div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goods-item .text1 {
  font-size: 24rpx;
  font-weight: bold;
}
.goods-item .text2 {
  font-size: 34rpx;
  color: #ff626b;
}
.goods-item .text3 {
  font-size: 22rpx;
}
.goods-item .text4 {
  font-size: 26rpx;
  font-weight: bold;
  color: #fff;
  background: #e33a44;
  margin: 10rpx 20rpx 0 20rpx;
  border-radius: 10rpx;
  height: 70rpx;
  line-height: 70rpx;
}

.goods-item .none {
  background: #cac9c9 !important;
}
.logo {
  position: fixed;
  bottom: 0;
  left: 0;
  background: #c7152d;
  width: 100%;
  height: 130rpx;
  text-align: center;
  z-index: 100;
}
.logo img {
  padding: 25rpx 0;
  height: 80rpx;
  width: 313rpx;
}
.confirm-mask {
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(0, 0, 0, 0.6);
  top: 0;
  left: 0;
  z-index: 12;
}

.confirm-addr-content img {
  height: 280rpx;
  width: 546rpx;
  position: relative;
  top: 116rpx;
  left: 113rpx;
}
.confirm-addr-content div span {
  color: #fff;
  font-size: 30rpx;
  background: #e33a44;
  padding: 20rpx 70rpx;
  border-radius: 100rpx;
  position: relative;
  top: 95rpx;
  left: 143rpx;
}
</style>
